<template>
  <view class="rich-text">
    <rich-text :nodes="content"></rich-text>
  </view>
</template>

<script>
export default {
  props: {
    rich_text: "",
  },
  data() {
    return {
      content: "",
      path: "",
    };
  },
  watch: {
    rich_text() {
      this.set_content();
    },
  },
  created() {
    this.path = uni.getStorageSync("file") || "";
    this.set_content();
  },
  methods: {
    set_content() {
      let rich_text = this.rich_text;
      this.content = rich_text
        ?.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
        .replace(
          /\<p/gi,
          '<p style="display: grid; grid-template-columns: none;"'
        )
        .replace(/\/file/gi, `${this.path}/file`);
    },
  },
};
</script>

<style lang="scss">
.rich-text {
  font-size: 22rpx;
  font-family: MiSans;
  font-weight: 400;
  color: #8a8a8a;
  line-height: 32rpx;
  word-wrap: break-word;
  word-break: normal;
}
</style>
